<template>
    <div class="swipper-box">
        <swiper :options="swiperOption" ref="mySwiper">
            <swiper-slide v-for="item in swipperList" :key="item.id">
                <img class="swipper-img" :src="item.imgUrl" alt="">
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </div>
</template>
<script>
import { METHODS } from 'http';

export default {
    name: "HomeSwipper",
    data() {
        return {
            swiperOption: {
                pagination: {
                    el: '.swiper-pagination'
                },
                loop: true,
                autoplay: true,
                speed: 2000
            },
            swipperList: [
                {
                    'id': '001',
                    'imgUrl': require('../../../../img/home/lunbo1.jpg')
                },
                {
                    'id': '002',
                    'imgUrl': require('../../../../img/home/lunbo2.jpg')
                },
                {
                    'id': '003',
                    'imgUrl': require('../../../../img/home/lunbo3.jpg')
                }
            ]
        }
    }
}
</script>

<style scoped lang="stylus">

.swipper-box>>>.swiper-pagination-bullet 
    background white 
    opacity 0.5 
.swipper-box>>>.swiper-pagination-bullet-active    
    background #df2127 
.swipper-box {
    height: 0;
    padding-bottom: 50%;
    overflow: hidden
}
.swipper-img {
    width: 100%;
    position: relative;
}

.swiper-pagination {
    text-align: right;
    position: absolute;
    top: 160px;
}
</style>